import React, { Component } from 'react'
import { connect } from 'dva';
import { Row, Col, Input, DatePicker, Button } from 'antd';
import List from './components/List'
import Modal from './components/Modal'
import { newFormatDate } from '../../../utils/dataConversion';

const { Search } = Input;
const { RangePicker } = DatePicker;

const dateFormat = 'YYYY/MM/DD';

class Index extends Component {
    getSearch = () =>{
        const { dispatch } = this.props
        const timeLength = this.refs.createTime.picker.state.value.length
        let name = this.refs.userName.input.state.value
        let start = timeLength > 0 ? this.refs.createTime.picker.state.value[0]._d : ''
        let end = timeLength > 0 ? this.refs.createTime.picker.state.value[1]._d : ''
        name = name ? name.replace(/\s*/g,"") : ''
        start = start !== '' ? newFormatDate(start) : ''
        end = end !== '' ? newFormatDate(end) : ''
        if(name === '' &&  start === '' && end === ''){
            this.refs.list.props.getTable()
        }else{
            dispatch({
                type: 'users/getSearch',
                action: {name,start,end}
            })
        }
    }

    clearChange = () =>{
        this.refs.userName.input.state.value = ''
        this.refs.userName.input.input.value = ''
        let NodeList = this.refs.createTime.picker.picker.childNodes[0].childNodes
        this.refs.createTime.picker.state.value = []
        NodeList.forEach(element => {
            if(element.value) element.value = '' 
        });
    }

    get tableProps() {
        const { dataSource, current, totalPage, visible } = this.props.users
        const { dispatch } = this.props

        return {
            dataSource,
            current,
            totalPage,
            getTable: current => {
                dispatch({
                    type: 'users/getDataSource',
                    payload: {
                        data: { currPage: current || 1 },
                        method: 'GET'
                    }
                })
            },
            editDataSource: id => {
                dispatch({
                    type: 'users/editDataSource',
                    action: id
                })
            },
            showModal: id => {
                dispatch({
                    type: 'users/showModal',
                    action: {
                        visible: visible,
                        id: id
                    }
                })
            }
        }
    }

    get modalProps() {
        const { modal, visible, confirmLoading } = this.props.users
        const { dispatch } = this.props

        return {
            modal,
            visible,
            confirmLoading,
            showModal: () => {
                dispatch({
                    type: 'users/showModal',
                    action: {
                        visible: visible
                    }
                })
            },
            handleOk: data => {
                dispatch({
                    type: 'users/handleOk',
                    action: data
                })
            }
        }
    }

    render() {
        const { visible } = this.props.users

        const { dispatch } = this.props

        return (
            <div>
                <Row gutter={36} style={{ marginBottom: 30 }}>
                    <Col xs={24} sm={12} md={8} xl={4}>
                        <Search
                            placeholder="名称"
                            ref="userName"
                            onSearch={this.getSearch}
                            style={{ width: 200 }}
                        />
                    </Col>
                    <Col xs={24} sm={12} md={8} xl={6}>
                        <div style={{ display: 'flex' }}>
                            <div style={{ width: 110, paddingRight: 10, lineHeight: '28px' }}>创建时间</div>
                            <RangePicker
                                ref="createTime"
                                format={dateFormat}
                            />
                        </div>
                    </Col>
                    <Col xs={24} sm={24} md={24} xl={14}>
                        <Row type='flex' justify='space-between'>
                            <div>
                                <Button type='primary' style={{ marginRight: 20 }} onClick={this.getSearch}>搜索</Button>
                                <Button onClick={this.clearChange} >清空</Button>
                            </div>
                            <Button onClick={() => {
                                dispatch({
                                    type: 'users/showModal',
                                    action: {
                                        visible: visible
                                    }
                                })
                            }}>新增</Button>
                        </Row>
                    </Col>
                </Row>
                <Row>
                    <Col xs={24} sm={24} md={24} xl={24}>
                        <List ref='list' {...this.tableProps} />
                    </Col>
                </Row>
                {visible ? <Modal {...this.modalProps} /> : ''}
            </div>
        )
    }
}
const mapStateToProps = state => {
    return {
        users: state.users
    }
}
export default connect(mapStateToProps)(Index)